<template lang='pug'>
append var
-var imgurl = 'static/image/'
	.main
		.inner
			.main-top
				.main-left
					img(src=imgurl+'voice.png' align='top')
					span(style='position: relative; top: -3px;') 接力世界杯，更懂活动将开始～
			.main-top
				.main-xxx
				.main-right
					img(src=imgurl+'point.png' 	align = 'middle')
					| 种子：8900枚
			.main-top
				.main-xxx
				.main-right-two(styke='text-align: right' :data-attr="'数量不足，请充值'") 数量不足，请充值
			.main-top
				.main-xxxx
				.main-right(style='font-size: 16px;background-size:90%;')
					img(src=imgurl+'ginseng.png' 	align = 'middle')
					span(style="position: relative;top: -10px;left: 0px;") 参王： 5 株
					br
					span(style="position: relative;top: -68px;left: 84px;") 极品： 3 株
			.main-middle
				.main-middle-son(:data-attr='"挖参秘籍"') 挖参秘籍
			.main-bottom
				ul
					li(v-for='(item,index) in 40' :key='index')
						img(src=imgurl+'zhongzi.png')
			con(:tablelist = 'index')
</template>
<script>
import con from "./../table";
import $ from "jquery";
console.log($);
function randomsort(a, b) {
  return Math.random() > 0.5 ? -1 : 1;
}
export default {
  data() {
    return {
      show: true,
      index: {
        title: "挖参排行榜",
        flag: true,
        table: [
          {
            title: "名次",
            list: ["种子总量", "参王", "极品参", "BPX"]
          },
          { title: "1.万妮", list: ["20000", "3株", "30株", "100"] },
          { title: "2.万妮", list: ["20000", "3株", "30株", "100"] },
          { title: "3.万妮玛", list: ["20000", "3株", "30株", "100"] }
        ],
        pop: "距离封山还有30秒，请准备～"
      }
    };
  },
  mounted() {
    $("#app").height($(document.body).height() - 66);
    this.$parent.flag1 = true;
    this.$parent.flag2 = false;
    var that = this;
    setTimeout(() => {
      that.seed();
    }, 10);
  },
  components: {
    con: con
  },
  methods: {
    seed() {
      var i = 0;
      var arr = [];
      while (i < 40) {
        arr.push(i);
        i++;
      }
      arr.sort(randomsort);
      var max_left =
        $(".main-bottom>ul>li:eq(0)").width() -
        $(".main-bottom>ul>li:eq(0)>img").width();
      var max_top =
        $(".main-bottom>ul>li:eq(0)").height() -
        $(".main-bottom>ul>li:eq(0)>img").height();
      console.log(max_left + "." + max_top);
      arr.forEach(function(item, index) {
        $(".main-bottom>ul>li")
          .eq(item)
          .css({
            transition: "all 1s " + (index / 15 + 2) + "s ease",
            top: "900px",
            transform: "rotateZ(360deg)"
          });
        $(".main-bottom>ul>li")
          .eq(item)
          .find("img")
          .css({
            top: Math.random() * max_top + "px",
            left: Math.random() * max_left + "px"
          });
      });
    }
  }
};
</script>
<style lang='less'>
@imgurl: "../../../static/image/";
body,
html {
  width: 100vw;
  height: 100vh;
}
#app {
  width: 100vw;
  height: 100vh;
}
img {
  display: inline-block;
}
.nav {
  height: 76px;
  width: 300px;
  margin: 0 auto;
  background-image: url("@{imgurl}z_3.png");
  background-repeat: no-repeat;
  .font;
  line-height: 47px;
  position: relative;
  top: -28px;
  margin-bottom: 22px;
  text-align: center;
}
.font {
  font-size: 27.67px;
  font-weight: 700;
  color: #fff;
}
.title(@color) {
  position: relative;
  color: white;
  z-index: 0;
  &:before {
    position: absolute;
    z-index: -1;
    content: attr(data-attr);
    -webkit-text-stroke: @color;
  }
}
.main {
  background-image: url("@{imgurl}ginsengbg.png");
  background-repeat: no-repeat;
  height: 100%;
  padding-top: 30px;
  background-size: 100% 100%;
  > .inner {
    margin: 0 auto;
    max-width: 1280px;
    height: 100%;
    > .main-top {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 10px;
      .main-left,
      .main-right {
        color: #fff;
        font-size: 22px;
        font-weight: 700;
        box-sizing: border-box;
        line-height: 60px;
      }
      > .main-right {
        width: 260px;
        height: 70px;
        background-image: url("@{imgurl}ginseng_base.png");
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 100% 80%;
        text-shadow: 2px 3px 5px rgba(80, 55, 25, 0.7);
        margin-right: 30px;
        line-height: 70px;
        span {
          font-size: 20px;
        }
        > img {
          margin-right: 13px;
          position: relative;
          top: -8px;
        }
      }
      > .main-right-two {
        color: #fff;
        font-size: 22px;
        position: relative;
        top: -10px;
        padding-right: 30px;
        .title(5px #c64d48);
      }
      > .main-left {
        height: 60px;
        width: 480px;
        background-image: url("@{imgurl}notice_1.png");
        background-size: 480px 60px;
        text-shadow: 2px 3px 5px rgba(80, 55, 25, 0.7);
        margin-left: 30px;
        > img {
          margin: 0px 20px;
          position: relative;
          top: 11px;
        }
      }
    }
    > .main-middle {
      margin-top: 30px;
      display: flex;
      justify-content: flex-end;
      > .main-middle-son {
        background-image: url("@{imgurl}excharge.png");
        background-repeat: no-repeat;
        height: 50px;
        width: 160px;
        background-size: 100%;
        margin-right: 30px;
        .font;
        font-size: 22px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        .title(3px #a65f0a);
      }
    }
    > .main-bottom {
      margin-bottom: 40px;
      background-repeat: no-repeat;
      height: 315px;
      background-position: center 42%;
      position: relative;
      > img {
        position: absolute;
        z-index: 100;
        opacity: 0;
        transition: all 1s ease;
      }
      > ul {
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        top: -900px;
        li {
          height: 25%;
          width: 10%;
          box-sizing: border-box;
          position: relative;
          top: 0;
          transform: rotateZ(0deg);
          img {
            top: 0;
            left: 0;
            position: relative;
          }
        }
      }
    }
  }
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: 100%;
}
.main-footer-son-one{
  text-shadow: -3px 1px 1px #1c6b65, 2px -1px 1px #1c6b65;
}
</style>
